<template>
  <div class="flex ml-3 gap-8">
    <video-player :id="1" class="w-[423px] h-[345px] object-fill border-2 border-gray-200">
    </video-player>
   <div class="">
     <el-form label-position="left" ref="elForm"  size="medium" label-width="100px">
       <el-form-item label="亮度" label-width="120px">
         <div class="flex items-center">
           <el-slider
             v-model="f1.brightness" class=" w-[200px]"
             :step="1" @change="handleBrightness">
           </el-slider>
           <span class="ml-2">{{  f1.brightness }}</span>
         </div>
       </el-form-item>
       <el-form-item label="对比度" label-width="120px">
         <div class="flex items-center">
           <el-slider
             v-model="f1.contrast" class=" w-[200px]"
             :step="1" @change="handleContrast">
           </el-slider>
           <span class="ml-2">{{  f1.contrast }}</span>
         </div>
       </el-form-item>
<!--       <el-form-item label="背景校正" label-width="120px">-->
<!--         <el-button class="!p-1 !px-4 !rounded-none !border-gray-500" type="" @click="handleSubmit1">-->
<!--           校正-->
<!--         </el-button>-->
<!--       </el-form-item>-->
       <el-form-item label="手动校正" label-width="120px">
         <el-button class="!p-1 !px-4 !rounded-none !border-gray-500" type="" @click="handleSubmit2">
           校正
         </el-button>
       </el-form-item>
       <el-form-item label="镜像" label-width="120px">
         <select v-model="type1" @change="handleTypeChange1" placeholder="" class="w-[204px]">
           <option label="无" :value="0"></option>
           <option label="中心旋转" :value="1"></option>
           <option label="上下镜像" :value="3"></option>
           <option label="左右镜像" :value="2"></option>
         </select>
       </el-form-item>
<!--       <el-form-item label="翻转" label-width="120px">-->
<!--         <select v-model="type2" @change="handleTypeChange2" placeholder="" class="w-[204px]">-->
<!--           <option label="正向" :value="0"></option>-->
<!--           <option label="反向" :value="1"></option>-->
<!--         </select>-->
<!--       </el-form-item>-->
<!--       <el-form-item label="DDE功能" label-width="120px">-->
<!--         <select v-model="a" placeholder="" class="w-[204px]">-->
<!--           <option label="开启" value="1"></option>-->
<!--           <option label="关闭" value="2"></option>-->
<!--         </select>-->
<!--       </el-form-item>-->
<!--       <el-form-item label="降噪功能" label-width="120px">-->
<!--         <select v-model="a" placeholder="" class="w-[204px]">-->
<!--           <option label="开启" value="1"></option>-->
<!--           <option label="关闭" value="2"></option>-->
<!--         </select>-->
<!--       </el-form-item>-->
<!--       <el-form-item label="聚焦" label-width="120px">-->
<!--         <select v-model="type1" placeholder="" class="w-[204px]">-->
<!--           <option label="开启" value="1"></option>-->
<!--           <option label="关闭" value="2"></option>-->
<!--         </select>-->
<!--       </el-form-item>-->
       <el-form-item label="伪彩" label-width="120px">
         <select v-model="colorVal" class="w-[204px]" @change="handleRuler">
           <option value="" disabled selected>请选择</option>
           <option value="IronRed">铁红</option>
           <option value="Steel">钢铁</option>
           <option value="Amber">琥珀</option>
           <option value="Rainbow">彩虹</option>
           <option value="CopperBrown">铜棕色</option>
           <option value="HighContrast">高对比</option>
           <option value="HighRainbow">高彩虹</option>
           <option value="YellowGreen">黄绿色</option>
           <option value="WhiteHeat">白热</option>
           <option value="BlackHeat">黑热</option>
           <option value="Medical">医疗</option>
           <option value="Arctic">北极</option>
         </select>
       </el-form-item>

<!--       <el-button class="!mt-4 !rounded-none !p-2 !px-4" type="" @click="handleSubmit">-->
<!--         恢复默认值-->
<!--       </el-button>-->
     </el-form>
   </div>
  </div>
</template>

<script>

import videoPlayer from "@/views/mini/videoplayer.vue"
import {backgroundCorrect, direction, displayparam, manualCorrect, palettes, rotate} from "../../../api/api";
import {getDirection, getDisplayParam, getPalettes, getRotate} from "@/api/api2";

export default {
  name: "xianshi",
  components: {
    videoPlayer,
  },
  data() {
    return {
      a: 0,
      f1: {
        brightness: null,
        contrast: null,
      },
      colorVal: null,
      type1: null,
      type2: null,
    };
  },
  created() {
    getPalettes().then((res) => {
      if (res.code === 0) {
        this.colorVal = res.data.colorVal;
      }
    })
    getDisplayParam().then((res) => {
      if (res.code === 0) {
        this.f1.brightness = res.data.brightness;
        this.f1.contrast = res.data.contrast;
      } else {
        this.$message.error("获取显示参数失败");
      }
    })
    getRotate().then((res) => {
      if (res.code === 0) {
        this.type1 = res.data.type;
      }
    })
    // getDirection().then((res) => {
    //   if (res.code === 0) {
    //     this.type2 = res.data.type;
    //   }
    // })
  },
  methods: {
    handleRuler() {
      palettes({
        colorVal: this.colorVal
      }).then((res) => {
        if (res.code === 0) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败");
        }
      })
    },
    handleBrightness(value) {
      console.log("Brightness changed:", value);
      displayparam(this.f1).then((res) => {
        if (res.code === 0) {
          // this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败");
        }
      })
    },
    handleContrast(value) {
      displayparam(this.f1).then((res) => {
        if (res.code === 0) {
          // this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败");
        }
      })
    },
    handleSubmit1() {
      backgroundCorrect().then((res) => {
        if (res.code === 0) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败");
        }
      })
    },
    handleSubmit2() {
      manualCorrect().then((res) => {
        if (res.code === 0) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败");
        }
      })
    },
    handleTypeChange1() {
      rotate({type : this.type1}).then((res) => {
        if (res.code === 0) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败");
        }
      })
    },
    handleTypeChange2(value) {
      console.log("Type changed:", value);
      direction({type : this.type2}).then((res) => {
        if (res.code === 0) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败");
        }
      })
    },
  },
}
</script>


<style scoped>

</style>
